<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-赠书列表(用户)</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    *{
        font-size: 14px
    }
    [v-cloak] {
        display: none;
    }
    .donation:hover{
        color:#409EFF;
        text-decoration:underline;
        cursor: pointer;
    }
    .active{
        color:#409EFF;
        text-decoration:underline;
    }

</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <div class="df-aic " id="donationDateWrap">
            <span v-for="(item,index) in allDonationDate" :key="index" class="donation ml-8" @click="clickDonationDate(index,item)"
            >{{item}}</span>
        </div>
        <el-table :data="tableData" v-loading="tableDataLoading" class="mt-4">
            <el-table-column prop="donationName" label="赠书人" width="150"></el-table-column>
            <el-table-column prop="donationInfo" label="赠书信息"></el-table-column>
            <el-table-column prop="donationTimeDesc" label="赠书时间"></el-table-column>
        </el-table>
    </div>

    <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                   :page-sizes="[10, 20, 50]"
                   prev-text="上一页" next-text="下一页"
                   :page-size="tableDataPaging.pageSize"
                   :current-page="tableDataPaging.currentPage"
                   @current-change="tableDataPagingChange"
                   @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                   @size-change="tableDataPagingSizeChange"
                   style="float:right;margin-top: 40px;padding-bottom:50px;">
    </el-pagination>


</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                queryParam : {
                    donationTime:"",
                },
                tableData : [],
                tableDataLoading : false,
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                allDonationDate:[],
                isFirstComing:true


            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                this.getAllDonationDate();
                this.getTableDataMethod();
            });
        },
        methods: {
            //获取所有的赠书日期
            getAllDonationDate(){
                let that = this;
                requestApiTB("donation/getAllDonationDate",{},'post',function(res){
                    if (res.code === 0) {
                        that.allDonationDate = res.data;
                        if(res.data){
                            that.queryParam.donationTime = res.data[0];
                        }
                    }else{
                        that.$message.error(res.msg);
                    }
                });


            },

            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },

            //获取表格的数据
            getTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                const {donationTime} = this.queryParam
                let queryData = {
                    donationTime: $.trim(donationTime),
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                }
                this.tableDataLoading = true;
                that.tableData = [];
                axios.post('/donation/getDonationList', queryData)
                    .then(result => {
                        let res = result.data;
                        this.tableDataLoading = false;
                        if (res.code === 0) {
                            that.tableData = res.data.list;
                            that.tableDataPaging.total = res.data.total;
                            if(that.isFirstComing) {
                                $($("#donationDateWrap").children()[0]).addClass("active");
                                that.isFirstComing = false;
                            }
                        }
                    }).catch(error => {
                    that.$message.error("error");
                    this.tableDataLoading = false
                })
            },

            //点击那个赠书日期的方法
            clickDonationDate(index,donationTime){
                let that = this;
                $("#donationDateWrap").children().removeClass("active");
                $($("#donationDateWrap").children()[index]).addClass("active");
                that.queryParam.donationTime = donationTime;
                that.getTableDataMethod(true);
            },




        }
    })
</script>
</html>